<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <page-search-column class="tab-column">
            <el-tabs v-model="tableType" class="theme-gray" @tab-click="handleClick">
                <el-tab-pane label="我收到的" name="1"></el-tab-pane>
                <el-tab-pane label="我共享的" name="2"></el-tab-pane>
            </el-tabs>
        </page-search-column>
        <page-search-column class="fixed-column">
            <page-search-item>
                <el-input v-model="formName" class="pbb__search-input" prefix-icon="el-icon-search" placeholder="请输入表单名称" clearable></el-input>
            </page-search-item>
            <page-search-item>
                <el-button type="primary" class="pbb__search-btn" @click="handleSearch()">搜索</el-button>
            </page-search-item>
        </page-search-column>
        <el-table
            :data="tableData"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            style="width: 100%;height: 638px;"
            :key="key">
            <template v-if="tableType === '1'">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="60">
                </el-table-column>
                <el-table-column
                    label="表单名称"
                    prop="formName">
                </el-table-column>
                <el-table-column
                    label="采集时间"
                    show-overflow-tooltip
                    width="340">
                    <template slot-scope="scope">
                        <span>{{ scope.row.startTime }} ~ {{ scope.row.endTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="共享人"
                    prop="shareUserName">
                    <template slot-scope="scope">
                        {{ scope.row.shareDepartmentName + "-" + scope.row.shareUserName }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="实际填报数"
                    prop="count">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleDetails(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </template>
            <template v-else>
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="60">
                </el-table-column>
                <el-table-column
                    label="表单名称"
                    prop="formName">
                </el-table-column>
                <el-table-column
                    label="采集时间"
                    prop="startTime"
                    width="400">
                    <template slot-scope="scope">
                        <span>{{ scope.row.startTime }} - {{ scope.row.endTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="被共享人"
                    prop="sharePeopleName"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    label="实际填报数"
                    prop="count">
                </el-table-column>
                <el-table-column
                    label="共享时间"
                    prop="createTime">
                </el-table-column>
            </template>
            <template slot="empty">
                <ask-empty-text style="min-height: 400px;"> </ask-empty-text>
            </template>
        </el-table>
        <template v-slot:footer v-if="total > 0">
            <pagination :total="total" :page.sync="currentPage" :limit.sync="pageSize" @pagination="getTable"/>
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { localStorage } from "@/utils";
@Component({
    name: "ShareData"
})
export default class ShareData extends Vue {
    formName = "";
    tableType = "1"
    tableData: any[] = [];
    currentPage = 1;
    pageSize = 10;
    total = 0;
    key = 0;


    beforeRouteEnter(to: any, from: any, next: any) {
        next((vm: any) => {
            if (from.name !== "TownCreatedAndReceivedDetailAllList") {
                vm.pageIndex = 1;
                vm.handleClick();
            }
        });
    }

    activated() {
        this.handleClick();
    }

    handleClick() {
        this.formName = "";
        this.tableData = [];
        if (this.tableType === "1") {
            this.getTableData({ currentPage: 1, pageSize: 10 });
        } else {
            this.getTableShared();
        }
        this.key++;
    }

    async getTableShared() {
        const res = await this.$server["moduleManage/shareData/toMeShareList"]({
            data: {
                currentPage: this.currentPage,
                pageSize: this.pageSize,
                name: this.formName
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records.map((item: any) => {
                const sharePeopleName: any[] = [];
                if (item.acceptUserDepartmentNames) {
                    item.acceptUserDepartmentNames.forEach((cur: any, index: any) => {
                        sharePeopleName.push(cur + "-" + item.acceptUserNames[index]);
                    });
                }
                return {
                    ...item,
                    sharePeopleName: sharePeopleName.join()
                };
            });
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    getTable(val: any) {
        if (this.tableType === "1") {
            this.getTableData({ currentPage: val.page, pageSize: val.limit });
        } else {
            this.getTableShared();
        }
    }

    // 获取表格数据
    async getTableData(data: any) {
        const res = await this.$server["moduleManage/shareData/shareList"]({
            data: {
                ...data,
                name: this.formName
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 按表单名称搜索
    handleSearch() {
        const data = { currentPage: 1, pageSize: 10, name: this.formName };
        if (this.tableType === "1") {
            this.getTableData(data);
        } else {
            this.currentPage = 1;
            this.getTableShared();
        }
    }

    handleDetails(row: any) {
        localStorage.setItem("childTask", row.processInstIds);
        this.$router.push({
            name: "TownCreatedAndReceivedDetailAllList",
            query: {
                name: row.formName,
                description: row.description,
                descriptionType: row.descriptionType,
                formId: row.formId,
                status: "2",
                pageFrom: "share"
            }
        });
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        background: transparent !important;
        height: calc(100% - 110px)!important;
    }
}
</style>
